<template>
	<view class="tuxedo">
		<view class="tuxedo-tour">
			<sc-tour :assemble="assemble.goods" @detailTap="detailTap" :show="false" :showTime="false"></sc-tour>
		</view>
		<view class="tuvedo-view " v-if="pageState == 1 && assemble.state == 0">
			<view class="tuvedo-flex">结束倒计时<uni-countdown color="#fff" background-color="#333333" :show-day="false" :hour="0" :minute="0" :second="assemble.time"></uni-countdown></view>
		    <view class="pic">
		    	<scroll-view :scroll-x="true" @scroll="scroll" class="scroll_pic">
		    		<view class="header_pic" v-for="(item,index) in assemble.user" :key="index">
		    			<image :src="item.avatar" mode="" v-if="item.id != '' && item.avatar != ''"></image>
		    			<image :src="Url+'mine/discount/header01.png'" mode="" v-if="item.id != '' && item.avatar == ''"></image>
		    			<image :src="Url+'add_images/group_no.png'" mode="" v-if="item.id == ''"></image>
		    			<view class="team" v-if="index == 0">
		    				团长
		    			</view>
		    		</view>
		    	</scroll-view>
		    </view>
			<view class="tuvedo-ji">
				<text>{{assemble.user.length}}</text>人团，仅剩{{assemble.last_num}}个名额
			</view>
		</view>
		<view v-else-if="pageState == 1 && assemble.state == 1" class="erro-img">
			<image :src="Url+'add_images/tour-jieshu.png'"></image>
			<text>此团已结束</text>
		</view>
		<block v-if="pageState == 1">
			<view class="tuvedo-cantuan" @tap="tolnav" v-if="assemble.state == 0">
				立即参团
			</view>
			<view class="tuvedo-cantuan" @tap="lookTour" v-else-if="assemble.state == 1">
				查看其他拼团
			</view>
			<view class="tuvedo-cantuan tuvedo-cantuanno" v-else>
				您已拼过该团
			</view>
		</block>
		<sc-home></sc-home>
		<shop-loading v-if="shopLoad"></shop-loading>
		<uni-login ref='login' @success="friendOrderOne" @error="backHome"></uni-login>
	</view>
</template>

<script>
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	import scTour from '@/pages/components/sc-tour.vue';
	import {friendOrderOne} from '@/common/index.js';
	export default {
		components:{
			scTour,uniCountdown
		},
		data() {
			return {
				assemble:{},
				list:[{avatar:this.Imgurl + 'mine/discount/product01.png'}],
				user_assemble_id:0,
				Url:this.Imgurl,
				shopLoad:true,
				pageState:1
			};
		},
		onLoad(ops) {
			this.user_assemble_id = ops.id;
			this.friendOrderOne()
		},
		methods:{
			friendOrderOne(){
				const {user_assemble_id} = this;
				this.shopLoad = true;
				friendOrderOne({user_assemble_id:user_assemble_id}).then(res=>{
					this.shopLoad = false;
					if(res.code == 1){
						let state = res.msg.state;
						if(state == 2){
							this.toast('您已拼过该团')
							uni.reLaunch({
								url: '/pageD/order/group_order'
							});
							// setTimeout(() => {
							// 	// console.log('进入返回')
							//   uni.reLaunch({
							//   	url: '/pageD/order/group_order'
							//   });
							// }, 2000);
						}
						this.assemble = res.msg;
						this.pageState = 1;
					}else if(res.code == 4){
						this.toast(res.msg);
						this.pageState = 2;
						this.login();
					}else{
						this.toast(res.msg)
					}
				}).catch()
			},
			backHome(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			login() {
				if(uni.getSystemInfoSync().version){
					this.$refs.login.show = true;
				}
			},
			tolnav(){
				const {assemble} = this;
				uni.reLaunch({
					url:'/pageB/classify/productdetail?type=3&id='+assemble.assemble_id+'&user_assemble_id='+assemble.user_assemble_id
				})
			},
			lookTour(){
				uni.reLaunch({
					url:'/pageA/groupbooking/groupbooking'
				})
			},
			detailTap(){
				
			},
			scroll(){
				
			}
		}
	}
</script>

<style lang="less">
	.erro-img{
		width:calc(100% - 30upx);
		padding: 20upx 0;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin:20upx auto;
		image{
			width: 110upx;
			height: 113upx;
			display: block;
			margin:20upx auto;
		}
		text{
			display: block;
			text-align: center;
			font-size: 24upx;
			color: #333333;
		}
	}
	.tuvedo-cantuan{
		width:calc(100% - 30upx);
		height: 86upx;
		text-align: center;
		line-height: 86upx;
		font-size: 32upx;
		color: #FFFFFF;
		border-radius:10upx;
		background-color: #FF2842;
		margin: 30upx auto;
		&.tuvedo-cantuanno{
			background-color: #666666;
		}
	}
	.tuvedo-ji{
		margin-top:40upx;
		font-size: 30upx;
		display: block;
		text-align: center;
		color: #666666;
		text{
			color: #333333;
		}
	}
	.tuxedo-tour{
		width: calc(100% - 30upx);
		border-radius: 10upx;
		margin:20upx auto;
		overflow: hidden;
	}
	.tuvedo-view{
		width: calc(100% - 30upx);
		padding:40upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin:20upx auto;
	}
	.tuvedo-flex{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
	}
		.title {
			font-size: 28upx;
			color: #333;
			display: flex;
			align-items: center;
	
			.uni-countdown {
				transform: scale(0.9);
			}
		}
	
		.pic {
			display: flex;
			margin-top: 30upx;
	
			.scroll_pic {
				// width: 600upx;
				width: 750upx;
				height: 120upx;
				white-space: nowrap;
				padding:0 30upx;
			}
	
			.header_pic {
				width: 106upx;
				height: 106upx;
				margin-right: 20upx;
				border-radius: 50%;
				box-sizing: border-box;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
	
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
	
			.header_pic:first-child {
				border: none;
				background-color: #f73e2f;
				position: relative;
				border:4upx solid rgba(255, 40, 66, 1);
				.team {
					width: 82upx;
					height: 36upx;
					border-radius: 8upx;
					font-size: 24upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36upx;
					background:linear-gradient(-90deg,rgba(255,94,113,1),rgba(255,40,66,1));
					position: absolute;
					left: 50%;
					bottom: -10upx;
					transform: translate(-50%);
				}
			}
		}
	
		.orderbtn_i {
			margin-top: 30upx;
			width: 156upx;
			height: 46upx;
			text-align: center;
			line-height: 46upx;
			border-radius: 8upx;
			font-size: 24upx;
		}
	
		.orderbtn_right {
			background-color: #FF2842;
			color: #ffffff;
		}
</style>
